<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>${mainArticle.title }</title>
	<link href="../image/icon.jpg" rel="icon">
	<link href="../css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>
	
	<style type="text/css">
		.detail_box{
			border-top-style: none;
			outline-style: none;
    		outline-width: 0px;
			position: relative;	
		}
		.detail_tittle{
			margin: 0 0 10px 0;
			width: 100%;
    		background-color: rgb(0, 102, 153);	
    		color: #fff;
    		overflow-x: hidden;
    		overflow-y: hidden;	
    		
		}
		.detail_title h1{	
			margin-top: -10px;
			line-height: 24px;
		}
		.text_overflow{
			font-size: 14px;
			margin-left: 15px;
			
		}
		table{
			border-top-style: solid;
			border-top-color: #a9cbee;
			border-top-width: 1px;
			width: 86.5%;
			margin: 0 0 8px 0;
			border-right: 1px solid #a9cbee;
		}
		.writer{
			text-align: center;
			max-width: 180x;
			background: #eff4fb;
			border-right-width: 1px;
			border-right-style: solid;
			border-right-color: #a9cbee;
			border-bottom: 1px solid #A9CBEE;
			border-left: 1px solid #a9cbee;
		}
		.user_info{
			padding: 10px 0px 10px 26px;
			text-align: left;
			
		}
		.user_head{
			position: relative;
			width: 127px;
		}
		.post_info{
			list-style: none;
			margin: 0;
			padding: 0;
			border: none;
			outline: 0 none;
			background-color: rgb(239, 244, 251);
		}
		.data{
			border-bottom: 1px solid #A9CBEE;
			padding: 0 10px;
			height: 29px;
			border-top-width: 1px;
			border-top-style: solid;
    		border-top-color: rgb(169, 203, 238);
    		padding-top: 0px;
    		padding-right: 10px;
    		line-height: 28px;
		}
		.fr{
			float: right;
		}
		.post_body{
			font-size: 14px;
		}
		.control{
			height: 29px;
			background-image: initial;
    		background-position-x: initial;
    		background-position-y: initial;
    		background-size: initial;
   			background-repeat-x: initial;
    		background-repeat-y: initial;
    		background-attachment: initial;
    		background-origin: initial;
    		background-clip: initial;
    		background-color: rgb(239, 244, 251);
    		border-top-width: 1px;
    		border-top-style: solid;
    		border-top-color: rgb(169, 203, 238);
    		padding-top: 0px;
    		padding-right: 10px;
    		line-height: 28px;
    		border-bottom: 1px solid #A9CBEE;
		}
		
	</style>
	
	
</head>
<body>
	
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">欢迎来到link论坛</a>
        </div>
        <c:forEach items="${boardInfo }" var="fatherBoard">
        	 <div class="navbar-header">
				<ul class="nav navbar-nav">
					<li class="dropdown">
						<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
							<b>${fatherBoard.key }</b>
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu" aria-labelledby="drop1">
							<c:forEach items="${fatherBoard.value }" var="childBoard">
								<li> <a href="#"> ${childBoard } </a> </li>
							</c:forEach>
						</ul>
					</li>
				</ul>
        	</div>
       </c:forEach>
        <div class="navbar-collapse collapse">
        <c:choose>
        	<c:when test="${userInfo!=null }">
        		<form class="navbar-form navbar-right" action="/forumweb/UserServlet?op=userLoginOut&email=${userInfo.email }&onlinetime=${userInfo.onlineTime}" method="post">
            		<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-user"  style="color: black"></span>${userInfo.email },你好!</button>
            		<button type="submit" class="btn btn-success">登 出</button>
          		</form>        	
        	</c:when>
        	<c:when test="${userInfo==null }">
        		<div class="navbar-form navbar-right">
        			<button type="button" class="btn btn-success">
            			<a href="user-login.jsp" style="color: white">登录</a>
            		</button>
            		<button type="button" class="btn btn-success">
            			<a href="user-regist.jsp" style="color: white">注册帐号</a>
            		</button>
        		</div>
        	</c:when>
        </c:choose> 
        </div><!--/.navbar-collapse -->
      </div>
    </div>

   	<div  class="jumbotron" style="margin-left: 380px;margin-right: 380px;margin-top: 70px;height: 180px">
    	<div class="container">
      		<marquee behavior="ALTERNATE"><h2 style="color: red"><b>消息公告:</b></h2></marquee>
       		<p><a href="#" style="color: blue">野生程序员的故事!</a></p>
    	</div>
 	</div>
 	<div class="container">
 		<div class="detail_box">
 			<div class="detail_tittle">
		 		<h1>
		 			<span class="text_overflow"><b>${mainArticle.title }[悬赏分数: <span style="color: red">${mainArticle.point }分</span>]</b></span>
		 			<span class="fr" style="margin-right: 10px">
		 			<span class="text_overflow"><b>所属板块:[ <span style="color: fuchsia">${mainArticle.bName }</span> ]</b></span>
		 			</span>
		 		</h1>
 		</div>
 		</div>
 	</div>
 	
 	<div class="container"><!-- 主贴内容显示:  -->
 		<table border="0" cellpadding="0" cellspacing="0">
 			<tbody>
 				<tr>
 					<td rowspan="2" valign="top" class="writer">
 						<dl class="user_info">
 							<dt class="user_head" >
 								<img alt="用户信息" src="../image/default1.gif"> 								
 							</dt>
 						</dl>
 					</td>
 					<td valign="top" class="post_info">
 						<div class="data">
 							<span class="fr"><strong style="color: red">楼主</strong></span>
 							<div style="margin-left: 1px">
 								帖子发表于： ${mainArticle.createTime }
 								<span><b>发贴人:<span style="color: red">${mainArticle.userName } </span></b></span>
 							</div>
 						</div>
 						<div class="post_body">
 							<script id="articleEditor" type="text/plain">${mainArticle.content }</script>
 						</div>
					</td>
 				</tr>
 				<tr >
 					<td valign="bottom">
 						<div class="control">
 							<div style="margin-left: 10px;">
 								回复次数: <b style="color: red">${receiptArticle.size() }</b>次
	 							<div class="fr">
	 								<a href="#" style="color: red; margin-right: 5px;">对我有用 </a>
	 								<a href="#" >丢个板砖</a>
	 							</div>
 							</div>	
 						</div>
 					</td>
 				</tr>
 			</tbody>
 		</table>	
 	</div><!-- 主贴内容显示结尾:  -->
 	
 	<c:forEach items="${receiptArticle }" var="article" varStatus="s"><!-- 回帖内容显示:  -->
	 	<div class="container" style="margin-top: 25px">
	 		<table border="0" cellpadding="0" cellspacing="0">
	 			<tbody>
	 				<tr>
	 					<td rowspan="2" valign="top" class="writer">
	 						<dl class="user_info">
	 							<dt class="user_head">
	 								 <img alt="用户信息" src="../image/default1.gif"> 							
	 							</dt>
	 						</dl>
	 					</td>
	 					<td valign="top" class="post_info">
	 						<div class="data">
	 							<span class="fr"><strong style="color: blue">${s.count }楼</strong></span>
	 							<div style="margin-left: 1px">
	 								回帖于： ${article.createTime }
	 								<span><b>回贴人:<span style="color: red">${article.userName } </span></b></span>
	 							</div>
	 						</div>
	 						<div class="post_body">
	 							<script id="articleEditor${s.index }" type="text/plain">${article.content }</script>
	 						</div>
						</td>
	 				</tr>
	 				<tr>
	 					<td valign="bottom">
	 						<div class="control">
	 							<div style="margin-left: 10px;">
	 								回复次数: 0次
		 							<div class="fr">
		 								<a href="#" style="color: red; margin-right: 5px;">对我有用 </a>
		 								<a href="#" >丢个板砖</a>
		 							</div>
	 							</div>	
	 						</div>
	 					</td>
	 				</tr>
	 			</tbody>
	 		</table>	
	 	</div>
 	</c:forEach><!-- 回贴内容显示结尾:  -->
 	
 	<div class="container" style="margin-top: 25px">
 	 	<div style="width: 100%">
 	 		<form action="../ArticleServlet?op=receiptArticle&mainId=${mainArticle.id }&userId=${userInfo.id}" method="post" onsubmit="return checkUserLogin()">
 	 			<script id="articleEditorReceipt" name="content" type="text/plain"></script>
 	 			<p style="display: inline-block;color: red;margin-left: 400px; font-size: 24px" id="prompt"></p><!-- 信息提示标签 -->
 	 			<div class="fr" style="margin-right: 10px;margin-top: 10px">
		      		<button type="submit" class="btn btn-primary btn-default" >回帖</button>
		     	</div>
 	 		</form>
 	 	</div>    	
	</div>
     <div class="container" style="margin-bottom: -30px">
		<hr>	<!-- 添加分割线换行 -->
		<footer>
			<p style="color: blue">&copy; author: Link</p>
		</footer>
	</div>

    
    
    <script type="text/javascript" src="../js/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="../js/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
    	var userEmail = '${userInfo.email}';//初始化判断userInfo是否为空
    	document.getElementById("prompt").innerHTML="";
        var ue = UE.getEditor('articleEditor',{
            toolbars: [
                       
                   ],
                   autoHeightEnabled: true,
                   autoFloatEnabled: true,
                   enableAutoSave:false,
                   readonly:true
               });
    	for(var i = 0;i<parseInt('${receiptArticle.size() }');i++){
    		var ue = UE.getEditor('articleEditor'+i,{
                toolbars: [
                           
                       ],
                       autoHeightEnabled: true,
                       autoFloatEnabled: true,
                       enableAutoSave:false,
                       readonly:true
                   });
    	} 
    	
		var ue1 = UE.getEditor('articleEditorReceipt',{
            toolbars: [
                       ['fullscreen', 'source', 'undo', 'redo', 'bold','snapscreen','selectall','link',]
                   ],
                   autoHeightEnabled: true,
                   enableAutoSave:false,
                   autoFloatEnabled: true
               });
       function checkUserLogin(){//回帖时判断用户是否已经登录
    		if(userEmail == ''){
    		   alert("您还未登录,请先登录!");
    		   return false;
    	   }
       	   var content = UE.getEditor('articleEditorReceipt');
       	   if(content.getContentTxt()==""){
       		   document.getElementById("prompt").innerHTML="请输入文本内容!";
       		   content.focus();
       		   return false;
       	   }
       }
		
    </script>
	
</body>
</html>


















